<template>
  <div>
    <el-breadcrumb separator="">
      <el-breadcrumb-item class="line" :to="{ path: $route.path }">{{
        $route.meta.title
      }}</el-breadcrumb-item>
      <el-button plain class="right">
        <a @click="close">
          <i class="el-icon-close"></i>
          关闭
        </a>
      </el-button>
      <el-button plain class="right">
        <a @click="shuaxin">
          <i class="el-icon-refresh"></i>
          刷新
        </a>
      </el-button>
    </el-breadcrumb>
    <div class="iconImg">
      <el-steps :active="3" align-center>
        <el-step title="提交订单" description="2018-07-19 15:43:23"
          ><i class="el-icon-check" slot="icon"
        /></el-step>
        <el-step title="支付订单" description="2018-07-19 15:43:23"
          ><i class="el-icon-check" slot="icon"
        /></el-step>
        <el-step title="平台发货" description="2018-07-19 15:43:23"
          ><i class="el-icon-check" slot="icon"
        /></el-step>
        <el-step title="确认收货" description=""
          ><i class="el-icon-time" slot="icon"
        /></el-step>
        <el-step title="完成评价" description=""
          ><i class="el-icon-time" slot="icon"
        /></el-step>
      </el-steps>
    </div>
    <div>
      <el-breadcrumb separator="">
        <span>
          <div class="leftTop">
            <i class="el-icon-warning-outline"></i>
            当前订单状态：已发货
          </div>
          <div class="rightTop">
            <el-button @click="orderTrack">订单跟踪 </el-button>
            <el-button @click="sendMessage">发送站内信 </el-button>
            <el-button @click="noteOrder">备注订单 </el-button>
          </div>
        </span>
      </el-breadcrumb>
      <!-- 基本信息 -->
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              <i class="el-icon-collection-tag"></i> 基本信息
            </el-header>
            <el-main class="info-main padding-style">
              <el-table :data="baseData" border>
                <el-table-column
                  prop="orderNum"
                  label="订单编号"
                  width="300"
                ></el-table-column>
                <el-table-column
                  prop="outGoodNum"
                  label="发货单流水号"
                  width="80"
                ></el-table-column>
                <el-table-column
                  prop="userNum"
                  label="用户账号"
                ></el-table-column>
                <el-table-column prop="payWay" label="支付方式">
                </el-table-column>
                <el-table-column prop="orderSource" label="订单来源">
                </el-table-column>
                <el-table-column prop="orderType" label="订单类型" width="100">
                </el-table-column>
                <el-table-column prop="sendWay" label="配送方式" width="100">
                </el-table-column>
                <el-table-column prop="logisticsNum" label="物流单号">
                </el-table-column>
                <el-table-column
                  prop="autoShouDate"
                  label="自动确认收货时间"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="actiMessage"
                  label="活动信息"
                  width="160"
                >
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
      <!-- 收货人信息 -->
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              <i class="el-icon-collection-tag"></i> 收货人信息
            </el-header>
            <el-main class="info-main padding-style">
              <el-table :data="shouData" border>
                <el-table-column
                  prop="shouPeople"
                  label="收货人"
                ></el-table-column>
                <el-table-column
                  prop="telPhopne"
                  label="手机号码"
                ></el-table-column>
                <el-table-column
                  prop="postalNum"
                  label="邮政编码"
                ></el-table-column>
                <el-table-column prop="shouAddr" label="收货地址">
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
      <!-- 商品信息 -->
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              <i class="el-icon-collection-tag"></i> 商品信息
            </el-header>
            <el-main class="info-main padding-style">
              <el-table :data="goodData" border>
                <el-table-column label="商品图片">
                  <template slot-scope="scope">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="scope.row.goodImg"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="goodName"
                  label="商品名称"
                ></el-table-column>
                <el-table-column
                  prop="priceOrNum"
                  label="价格/货号"
                ></el-table-column>
                <el-table-column prop="attr" label="属性"> </el-table-column>
                <el-table-column prop="number" label="数量"> </el-table-column>
                <el-table-column prop="reserve" label="库存"> </el-table-column>
                <el-table-column prop="Subtotal" label="小计">
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer class="info-foot">
              <div class="paging-style">
                合计：¥
                <span class="redFont">{{ allPrice }}</span>
              </div>
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
      <!-- 费用信息 -->
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              <i class="el-icon-collection-tag"></i> 费用信息
            </el-header>
            <el-main class="info-main padding-style">
              <el-table :data="costData" border>
                <el-table-column label="商品合计">
                  ￥{{ allPrice }}
                </el-table-column>
                <el-table-column prop="Freight" label="运费"></el-table-column>
                <el-table-column prop="coupon" label="优惠券"></el-table-column>
                <el-table-column prop="actiDiscount" label="活动优惠">
                </el-table-column>
                <el-table-column label="订单总金额">
                  ￥<span class="redFont">
                    {{ orderPrice }}
                  </span></el-table-column
                >
                <el-table-column label="应付款金额">
                  ￥<span class="redFont"> {{ amountPayable }} </span>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
      <!-- 操作信息 -->
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              <i class="el-icon-collection-tag"></i> 操作信息
            </el-header>
            <el-main class="info-main padding-style">
              <el-table :data="operatData" border>
                <el-table-column prop="role" label="操作者"> </el-table-column>
                <el-table-column
                  prop="dateTime"
                  label="操作时间"
                ></el-table-column>
                <el-table-column
                  prop="orderStatus"
                  label="订单状态"
                ></el-table-column>
                <el-table-column prop="payStatus" label="付款状态">
                </el-table-column>
                <el-table-column
                  prop="outStatus"
                  label="发货状态"
                ></el-table-column>
                <el-table-column prop="note" label="备注"> </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </div>
    <!-- 备注订单 -->
    <div>
      <el-dialog
        :title="'备注订单'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-form-inline"
        >
          <el-form-item label="操作备注">
            <el-input
              v-model="ruleForm.note"
              type="textarea"
              :rows="6"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确定</el-button
            >
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <!-- 发送站内信 -->
    <div>
      <el-dialog
        :title="'发送站内信'"
        :close-on-click-modal="false"
        :visible.sync="visible"
      >
        <el-form
          :model="Form"
          :rules="rules2"
          ref="Form"
          class="demo-form-inline"
        >
          <el-form-item label="标题">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              v-model="ruleForm.content"
              type="textarea"
              :rows="6"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(Form)">确定</el-button>
            <el-button @click="visible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allPrice: 0,
      orderPrice: 0,
      amountPayable: 0,
      labelPosition: "right",
      dialogVisible: false,
      visible: false,
      ruleForm: {
        note: ""
      },
      rules: {
        note: [
          { required: true, message: "请输入操作备注", trigger: "blur" },
          { max: 200, message: "长度在200个字符以内", trigger: "blur" }
        ]
      },
      Form: {
        title: "",
        content: ""
      },
      rules2: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { max: 200, message: "长度在200个字符以内", trigger: "blur" }
        ]
      },
      baseData: [
        {
          orderNum: "201807196398345",
          outGoodNum: "未发货",
          userNum: "18000000000",
          payWay: "未支付",
          orderSource: "APP订单",
          orderType: "普通订单",
          sendWay: "未发货",
          logisticsNum: "未发货",
          autoShouDate: "15天",
          actiMessage: "满100减10"
        }
      ],
      shouData: [
        {
          shouPeople: "老李",
          telPhopne: "18000000000",
          postalNum: "621707",
          shouAddr: "四川省绵阳市保利大厦A座"
        }
      ],
      goodData: [
        {
          goodImg:
            "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3139879568,3874260001&fm=179&app=42&f=JPEG?w=121&h=140&s=0270128954A65FBBD6F5D4DB030090B1",
          goodName: "2018 iphoneXsMax128GB品牌：Apple Inc.",
          priceOrNum: "价格：¥9599.00   货号：No999999",
          attr: "尺寸：X  颜色：黑色",
          number: "1",
          reserve: "100",
          Subtotal: 9599.0
        },
        {
          goodImg:
            "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3139879568,3874260001&fm=179&app=42&f=JPEG?w=121&h=140&s=0270128954A65FBBD6F5D4DB030090B1",
          goodName: "2018 iphoneXsMax128GB品牌：Apple Inc.",
          priceOrNum: "价格：¥9599.00   货号：No999999",
          attr: "尺寸：X  颜色：黑色",
          number: "1",
          reserve: "100",
          Subtotal: 9599.0
        }
      ],
      costData: [
        {
          Freight: 0,
          coupon: 20,
          actiDiscount: 10
        }
      ],
      operatData: [
        {
          role: "用户",
          dateTime: "2018-07-19 15:43:23",
          orderStatus: "已完成",
          payStatus: "已支付",
          outStatus: "已发货",
          note: "完成商品评价"
        },
        {
          role: "用户",
          dateTime: "2018-07-19 15:43:23",
          orderStatus: "已完成",
          payStatus: "已支付",
          outStatus: "已发货",
          note: "手动确认收货"
        },
        {
          role: "系统",
          dateTime: "2018-07-19 15:43:23",
          orderStatus: "已完成",
          payStatus: "已支付",
          outStatus: "已发货",
          note: "自动确认收货"
        },
        {
          role: "admin",
          dateTime: "2018-07-19 15:43:23",
          orderStatus: "已完成",
          payStatus: "已支付",
          outStatus: "已发货",
          note: "完成发货"
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.goodData.forEach(item => {
        if (item != null) {
          this.allPrice = Number(this.allPrice) + Number(item.Subtotal)
        }
        // if (item.children) {
        //   traverse(item.children)
        // }
      })
      this.costData.forEach(item => {
        if (item != null) {
          this.orderPrice = Number(this.allPrice) + Number(item.Freight)
          this.amountPayable =
            Number(this.orderPrice) -
            Number(item.coupon) -
            Number(item.actiDiscount)
        }
      })
      this.$nextTick(() => {})
    },
    shuaxin() {
      this.$router.go(0)
    },
    close() {
      window.opener = null
      window.open("about:blank", "_top").close()
    },
    orderTrack() {
      let routeData = this.$router.resolve({
        name: "orderTrack"
      })
      window.open(routeData.href, "_blank")
    },
    noteOrder() {
      this.dialogVisible = true
    },
    submitForm(row) {
      alert("提交成功")
      console.log(row)
    },
    sendMessage() {
      this.visible = true
    }
  }
}
</script>
<style scoped>
.iconImg {
  text-align: center;
  font-size: 18px;
}
.leftTop {
  color: red;
  float: left;
  margin-left: 40px;
  text-align: center;
  font-size: 16px;
}
.rightTop {
  float: right;
  margin-right: 20px;
  text-align: center;
}
.redFont {
  color: red;
}
.paging-style {
  height: 60px;
  width: 300px;
  margin: auto;
  padding: auto;
}
</style>
